{% load static %}
<div class="profile-container">
    <div class="profile-header">
        <div class="header-left">
            <h2><i class="fas fa-user-cog"></i> 账号管理</h2>
        </div>
    </div>
    
    <div class="profile-tabs">
        <div class="tab-buttons">
            <button class="tab-btn active" data-tab="basic-info">基本资料</button>
            <button class="tab-btn" data-tab="change-avatar">修改头像</button>
            <button class="tab-btn" data-tab="password-manage">密码管理</button>
            <button class="tab-btn" data-tab="register-account">注销账号</button>
            <button class="tab-btn" data-tab="language">语言</button>
        </div>
    </div>
    
    <div class="profile-content">
        <div class="tab-content active" id="basic-info">
            <div class="user-info-card">
                <div class="actions-bar">
                    <button id="edit-toggle-btn" class="edit-btn"><i class="fas fa-edit"></i> 修改</button>
                </div>
                <div class="info-row">
                    <div class="info-label">姓名</div>
                    <div class="info-value">
                        <span id="username-text">{{ user.username|default:"未设置" }}</span>
                        <input id="username-input" type="text" value="{{ user.username }}" placeholder="请输入用户名" class="hidden">
                    </div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">id</div>
                    <div class="info-value"><span id="user-id-value">{{ user.id }}</span></div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">性别</div>
                    <div class="info-value">
                        <span id="gender-value">{% if user.gender == 'male' %}男{% elif user.gender == 'female' %}女{% else %}未设置{% endif %}</span>
                        <div id="gender-input-group" class="hidden">
                            <label class="radio-label">
                                <input type="radio" id="gender-male" name="gender" value="male" {% if user.gender == 'male' %}checked{% endif %}>
                                <span>男</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" id="gender-female" name="gender" value="female" {% if user.gender == 'female' %}checked{% endif %}>
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">手机号</div>
                    <div class="info-value">
                        <span id="phone-text">{{ user.phone|default:"未设置" }}</span>
                        <input id="phone-input" type="tel" inputmode="numeric" pattern="[0-9]{11}" value="{{ user.phone|default:'' }}" placeholder="请输入11位手机号" class="hidden">
                    </div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">邮箱</div>
                    <div class="info-value">
                        <span id="email-text">{{ user.email|default:"未设置" }}</span>
                        <input id="email-input" type="email" value="{{ user.email|default:'' }}" placeholder="请输入邮箱地址" class="hidden">
                    </div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">角色</div>
                    <div class="info-value"><span id="role-name-value">{{ role_name }}</span></div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">状态</div>
                    <div class="info-value"><span id="is-active-value">{{ user.is_active|yesno:'是,否' }}</span></div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">注册时间</div>
                    <div class="info-value"><span id="date-joined-value">{{ user.date_joined|date:'Y-m-d H:i:s' }}</span></div>
                </div>
                
                <div class="info-row">
                    <div class="info-label">上次登录</div>
                    <div class="info-value"><span id="last-login-value">{% if user.last_login %}{{ user.last_login|date:'Y-m-d H:i:s' }}{% else %}未设置{% endif %}</span></div>
                </div>
                <!-- 单位信息已移除，保持界面简洁 -->
                <!-- 单位信息已移除，保持界面整洁 -->
            </div>
        </div>
        
        <div class="tab-content" id="change-avatar">
            <div class="avatar-section">
                <h3>修改头像</h3>
                <div class="avatar-preview" style="--avatar-size: {{ avatar_size }}px;">
                    <i id="avatar-icon"
                       style="{% if user.avatar %}background-image:url('{{ user.avatar.url }}');{% else %}background-image:url('{% static 'img/default-avatar.svg' %}');{% endif %}"></i>
                    <span class="avatar-overlay"><i class="fas fa-camera"></i> 点击更换头像</span>
                </div>
                <p class="format-tip">支持 JPG/PNG，点击头像更换</p>
                <button class="save-avatar-btn" disabled>保存头像</button>
            </div>
        </div>
        
        <div class="tab-content" id="password-manage">
            <div class="password-section">
                <h3>修改密码</h3>
                <form id="password-form">
                    <div class="form-group">
                        <label for="current-password">当前密码</label>
                        <input type="password" id="current-password" required>
                    </div>
                    <div class="form-group">
                        <label for="new-password">新密码</label>
                        <input type="password" id="new-password" required>
                    </div>
                    <div class="form-group">
                        <label for="confirm-password">确认新密码</label>
                        <input type="password" id="confirm-password" required>
                    </div>
                    <button type="submit" class="save-password-btn">保存修改</button>
                    <div id="password-feedback" class="form-feedback"></div>
                </form>
            </div>
        </div>
        
        <div class="tab-content" id="register-account">
            <div class="delete-section">
                <h3>注销账号</h3>
                <p class="warning-text">警告：注销账号后，您的所有数据将被删除且无法恢复！</p>
                <button class="delete-account-btn">确认注销</button>
            </div>
        </div>
        
        <div class="tab-content" id="language">
            <div class="language-section">
                <h3>语言设置</h3>
                <div class="language-options">
                    <label class="radio-label">
                        <input type="radio" name="language" value="zh-CN" checked>
                        <span>简体中文</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="language" value="en-US">
                        <span>English</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>